<!--
 * @Author: your name
 * @Date: 2021-04-01 14:08:02
 * @LastEditTime: 2021-04-02 21:18:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\dianshang\src\views\Live\index.vue
-->
<!-- 直播特卖 -->
<template>
  <div class="live">
    <header>
      <span style="font-size: 20px;" @click="() => $router.push('/layout/home')"
        ><svg-icon iconClass="back" class="zhuo_back"></svg-icon
      ></span>
      <h2 style="font-size: 14px;">直播特卖</h2>
      <span class="set"><van-icon name="ellipsis"/></span>
    </header>
    <main>
      <vue-waterfall-easy
        style="width: 100%; height: 100%;"
        :imgsArr="liveData"
        :gap="20"
        :height="400"
        :loadingDotCount="0"
        :imgWidth="180"
        :maxCols="5"
        @scrollReachBottom="handleScrollButtom"
        @click="handlePushDirect"
      >
        <div
          slot-scope="props"
          style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; background: #fff;"
        >
          <p style="margin: 10px 0;">
            <span
              v-if="props.value.live"
              v-html="props.value.live ? '正在直播' : ''"
              style="margin: 0 5px; background: #d71a43; color: #fff; padding: 2px 2px; border-radius: 5px;"
            ></span>
            <span v-html="props.value.title"></span>
          </p>
          <div
            style="width: 100%; display: flex; align-items: center; justify-content: space-between; padding:5px 0;"
          >
            <p>
              <span style="color: #ef7368; margin: 0 5px;">
                <b>￥</b>
                <b style="font-size: 16px;">{{ props.value.price }}</b>
              </span>
              <span v-html="props.value.sendOut + '人付款'"></span>
            </p>
            <p style="font-size: 16px; color: #ccc;">...</p>
          </div>
        </div>
      </vue-waterfall-easy>
    </main>
  </div>
</template>

<script>
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  components: {
    vueWaterfallEasy,
  },
  data() {
    return {
      liveData: [],
      page: 1,
      limit: 5,
    };
  },
  methods: {
    //获取数据
    async getListData() {
      const data = await this.$api.live(this.page, this.limit);
      if (data.code === 200) {
        this.liveData = data.data.pageList;
      }
    },
    //下拉加载
    async handleScrollButtom() {
      this.page += 1;
      const data = await this.$api.live(this.page, this.limit);
      if (data.code === 200) {
        data.data.pageList.forEach((item) => {
          this.liveData.push(item);
        });
      }
    },
    handlePushDirect(event, { index, value }) {
      event.preventDefault();
      // 只有当点击到图片时才进行操作
      if (event.target.tagName.toLowerCase() == "img") {
        if (value.live) {
          this.$router.push({ path: "/direct", query: { id: value.liveId } });
        }
      }
    },
  },
  created() {
    this.getListData(); //获取数据
  },
};
</script>

<style lang="scss" scoped>
.live {
  width: 100%;
  height: 100%;
  font-size: 12px;
  background: #f1f1ef;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  header {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #555882;
    color: #fff;
    font-weight: bold;
    .set {
      font-size: 24px;
    }
  }
  main {
    flex: 1;
  }
}
</style>
